<template>
	<view class="wrap-top-head" :style="'padding-top:' + statusHeight + 'px;'">
		<image
			class="top-bg"
			mode="widthFix"
			:src="bgImg"
		/>
		
		<view class="navigation-bar flex align-center">
			<view class="city-box flex align-center" @click.stop="onCity">
				<view class="wlIcon-weizhi size1"></view>
				<view class="city">小石子集市</view>
				<view class="wlIcon-fanhui2 size2"></view>
			</view>
		</view>
		
		<view class="wrap-search">
			<view class="search-bg flex align-center" @click.stop="onSearch">
				<image
					class="search-img"
					:src="$staticImagePath('home/search.png')"
				/>
				
				<view class="mo">
					请输入搜索药品
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 城市ID
			 */
			addressID: {
				type: String,
				default: "",
			},
			/**
			 * 背景
			 */
			bgImg: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				statusHeight: uni.getWindowInfo()["statusBarHeight"], //状态栏高度
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.onCalculationHeight();
			})
		},
		methods: {
			/**
			 * 计算高度
			 */
			onCalculationHeight() {
				let query = uni.createSelectorQuery().in(this);
				query.select(".wrap-top-head").boundingClientRect(res => {
					if (res) {
						const height = res.height;
						
						this.$emit("onTopHeight", height);
					}
				});
				query.exec();
			},
			/**
			 * 城市
			 */
			onCity() {
				this.$wanlshop.to(`/pages/new/positioning/positioning?address_id=${this.addressID}`);
			},
			/**
			 * 搜索
			 */
			onSearch() {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=`, 'fade-in', 100);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-top-head {
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		overflow: hidden;
		z-index: 99;
		
		.top-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 100;
		}
		
		.navigation-bar {
			width: 100%;
			height: 45px;
			overflow: hidden;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			color: #333333;
			position: relative;
			z-index: 101;
			
			.city-box {
				overflow: hidden;
				
				.city {
					max-width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 10rpx;
					font-size: 26rpx;
				}
				
				.size2 {
					font-size: 22rpx;
				}
			}
		}
		
		.wrap-search {
			width: 100%;
			padding: 20rpx 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 101;
			box-sizing: border-box;
			
			.search-bg {
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 50rpx;
				overflow: hidden;
				padding: 0rpx 36rpx;
				box-sizing: border-box;
				gap: 30rpx;
				
				.search-img {
					width: 36rpx;
					height: 40rpx;
				}
				
				.mo {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
</style>